import { GameTeamPK } from '@/services/game/GameController';
import { ProCard } from '@ant-design/pro-components';
import { Card, Col, Flex, Modal, Radio, RadioChangeEvent, Row, Typography } from 'antd';
import React, { PropsWithChildren } from 'react';

/**
 * 赛事信息-录入Pk结果
 */
interface Props {
  pkData?: GameTeamPK;
  gameId?: string;
  onCancel: (colse: boolean) => void;
}
const ages = [
  { value: 1, label: '2' },
  { value: 2, label: '3' },
  { value: 3, label: '4' },
  { value: 4, label: '5' },
  { value: 5, label: '6' },
  { value: 6, label: '7' },
  { value: 7, label: '8' },
  { value: 8, label: '9' },
  { value: 9, label: '10' },
  { value: 10, label: 'J' },
  { value: 11, label: 'Q' },
  { value: 12, label: 'K' },
  { value: 13, label: 'A' },
  { value: 14, label: 'A+' },
];
const GameEnterPKInfoDialog: React.FC<PropsWithChildren<Props>> = (props) => {
  const { onCancel, pkData } = props;
  const [pkTeamA, setPkTeamA] = React.useState<GameTeamPK>();
  const [levelA, setLevelA] = React.useState<number>(2);
  const [levelB, setLevelB] = React.useState<number>(2);

  return (
    <Modal
      open={true}
      onCancel={() => onCancel(false)}
      onOk={() => { }}
      width="40%"
      height="100%"
      title="结果录入"
      style={{ padding: 0, top: 10, alignItems: 'center' }}
    >
      <ProCard title='A组' extra={<Typography.Text strong>编号{pkData?.pkTeamA?.teamCode}</Typography.Text>} boxShadow>
        <Row justify="space-between" align="middle">
          <Col span={3}>
            <Flex style={{ flexDirection: 'column', alignItems: 'center' }}>
              <Typography.Text>
                <Typography.Text strong>东</Typography.Text> {pkData?.pkEast?.playerName}
              </Typography.Text>
              <Typography.Text>
                <Typography.Text strong>西</Typography.Text>  {pkData?.pkWest?.playerName}
              </Typography.Text>
            </Flex>
          </Col>
          <Col span={8}>
            <Flex style={{ flexDirection: 'column', alignItems: 'center' }}>
              <Typography.Text strong style={{ fontSize: 16, color: (levelA > levelB ? 'red' : levelA < levelB ? 'green' : '#38a1f7ff') }}>
                {levelA > levelB ? '胜' :
                  levelA < levelB ? '负' :
                    '平'}
              </Typography.Text>
            </Flex>
          </Col>
          <Col span={3}>
            <Flex vertical>
              <Typography.Text>牌级:{levelA}</Typography.Text>
            </Flex>
          </Col>
        </Row>

        <Row
          justify="start"
          align="middle"
          style={{ marginTop: 5, marginBottom: 5 }}
        >
          <Radio.Group defaultValue={1} options={ages} optionType="button" buttonStyle="solid" size='large' onChange={({ target: { value } }: RadioChangeEvent) => {
            setLevelA(value)
          }} />
        </Row>
      </ProCard>
      <ProCard title="B组" style={{ marginTop: 10 }} extra={<Typography.Text strong>编号{pkData?.pkTeamB?.teamCode}</Typography.Text>} boxShadow>
        <Row justify="space-between" align="middle">
          <Col span={3}>
            <Flex style={{ flexDirection: 'column', alignItems: 'center' }}>
              <Typography.Text>
                <Typography.Text strong>南</Typography.Text>{pkData?.pkSouth?.playerName}
              </Typography.Text>
              <Typography.Text>
                <Typography.Text strong>北</Typography.Text>{pkData?.pkNorth?.playerName}
              </Typography.Text>
            </Flex>
          </Col>
          <Col span={8}>
            <Flex style={{ flexDirection: 'column', alignItems: 'center' }}>
              <Typography.Text strong style={{ fontSize: 16, color: (levelB > levelA ? 'red' : levelB < levelA ? 'green' : '#38a1f7ff') }}>
                {levelA < levelB ? '胜' :
                  levelA > levelB ? '负' :
                    '平'}
              </Typography.Text>
            </Flex>
          </Col>
          <Col span={3}>
            <Flex vertical>
              <Typography.Text>牌级:{levelB}</Typography.Text>
            </Flex>
          </Col>
        </Row>

        <Row
          justify="start"
          align="middle"
          style={{ marginTop: 5, marginBottom: 5 }}
        >
          <Radio.Group defaultValue={1} options={ages} optionType="button" buttonStyle="solid" size='large' onChange={({ target: { value } }: RadioChangeEvent) => {
            setLevelB(value)
          }} />
        </Row>
      </ProCard>
    </Modal>
  );
};
export default GameEnterPKInfoDialog;
